<template>
  <div class="my-data-container">
    <div align="center">
      <q-btn
        dense
        flat
        icon="add"
        color="primary"
        label="添加数据节点"
        @click="addNewDataItem"
      />
    </div>
    <DataItemInput
      :data-list=selectedComponent.dataItem
      :project-list-arr="uivProjectList"
      @data-info="updateDataItem"
    />
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, onUnmounted } from 'vue';
import { useEditorStore } from 'stores/editorStore';
import { storeToRefs } from 'pinia';
import { CDataNode } from 'stores/editorModels';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';

const DataItemInput = defineAsyncComponent(() => import('components/common/DataItemInput.vue'));

export default defineComponent({
  name: 'ComponentDataItem',
  components: {
    DataItemInput
  },
  setup (props) {
    //store
    const store = useEditorStore();

    // 响应式数据解构
    const {
      selectedComponent
    } = storeToRefs(store);

    //目录
    const {
      uivProjectList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl();

    //增加数据节点
    const addNewDataItem = () => {
      //加入数组
      selectedComponent.value?.dataItem.push({
        id: 0,
        nodeLabel: '变量名',
        nodeValue: '',
        variableLabel: '变量ID',
        variableValue: 0
      });
    }

    //更新节点
    const updateDataItem = (list: CDataNode[]) => {
      if (selectedComponent.value?.dataItem) {
        selectedComponent.value.dataItem.length = 0;
        list.forEach((item) => {
          selectedComponent.value?.dataItem.push(item);
        });
      }
    }

    //挂载组件
    onMounted(() => {
      getUivCatalog(uivCatalogType.PROJECT_LIST_CODE);
    });

    //卸载组件
    onUnmounted(() => {
      removeUivCatalog(uivCatalogType.PROJECT_LIST_CODE);
    });

    return {
      selectedComponent,
      uivProjectList,
      addNewDataItem,
      updateDataItem
    };
  }
});
</script>

<style lang="scss" scoped>
.my-data-container {
  padding: 10px;
}
</style>
